import { useState } from 'react';
import { StyleSheet, TextInput  } from 'react-native';
import { px2dp } from '../../../utils/pixel-adapter';


export function Input(props) {
    const [isFocus, setFocus] = useState(false);
    function onFocus() {
        setFocus(true);
    }

    function onBlur() {
        setFocus(false);
    }

    return (
        <TextInput
            {...props}
            onFocus={onFocus}
            secureTextEntry={props.secureTextEntry}
            onBlur={onBlur}
            onChangeText={props.onChangeText}
            style={[styles.input, props.style, isFocus && styles.focus]}
            placeholderTextColor="rgb(113, 113, 122)"
        />
    );
}


const styles = StyleSheet.create({
    input: {
        width: '100%',
        height: 56,
        borderWidth: 1,
        backgroundColor: 'rgba(24, 24, 27, 0.8)',
        borderColor: 'rgb(39, 39, 42)',
        borderRadius: px2dp(12),
        paddingLeft: 15,
        paddingRight: 15,
        marginVertical: 10,
        fontSize: 16,
        color: 'white',
    },
    focus: {
        borderWidth: px2dp(2),
        borderColor: 'rgb(255, 255, 255)',
        // outlineWidth: px2dp(2),
        // outlineColor: 'rgb(255, 255, 255)',
        paddingLeft: 15,
    }
});